<template>
    <div id="order">

        <div class="order-top" @click="onAdd" v-show="isAddShow">
            <div class="order-top-left">
                <span>+</span>
                <small>新增收货地址</small>
            </div>
            <van-icon name="arrow" size="18" />
        </div>

        <Add :list="list" v-show="isAddShow" />

        <div class="order-box">
            <div class="order-bottom-p">商品列表</div>
            <div class="order-box-container">
                <van-card
                    v-for="item in $store.state.cartList"
                    :key="item.id"
                    :price="item.minPrice | filprice"
                    :title="item.name"
                    :thumb="item.pic"
                    :num="item.count"
                    />
            </div>
        </div>

        <div class="order-bottom">
            <div class="order-bottom-p">配送方式
                <span>快递</span>
            </div>
            <!-- Field:输入框 -->
            <!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
            <van-cell-group>
                <van-field v-model="value" label="备注" placeholder="如需备注请输入" />
            </van-cell-group>
        </div>

        <p class="order-shop">商品金额
            <span>￥{{$store.getters.Price}}</span>
        </p>

        <!-- 提交订单栏 -->
        <van-submit-bar button-color="#A13232" :price="$store.getters.Price*100" button-text="提交订单" @submit="onSite" />
        
    </div>
</template>

<script>
import Add from '../../components/popular/Add';

export default {
    components:{
        Add,
    },
    data() {
        return {
            username:"",
            mobile:"",
            list:[],
            value: '',
            columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            showPicker: false,
            isAddShow:true,
        }
    },
    mounted() {
        this.list = JSON.parse(localStorage.getItem("list")) || [];

        console.log(this.list);
    },
    methods: {
        // 提交订单 
        onSite(){
            this.$router.push("/Payment");
        },
        // 新增地址
        onAdd(){
            var list = localStorage.getItem("list");
            console.log(list);

            if(list){
                this.$router.push("/Site");
            }else{
                this.$router.push("/Address");
            }
            
        }
    },
    // 过滤器
    filters:{
        // 过滤价格
        filprice(price){
            return (price*100).toFixed(2);
        }
    }
}
</script>

<style lang="scss">
#order{
    width: 100%;
    height: 100%;
    font-size: 0.25rem;
    background-color: #F5F5F5;
    .order-top{
        width: 100%;
        padding:0.52rem 0;
        border-bottom:0.01rem dashed blue;
        background-color: #fff;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        .order-top-left{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            span{
                color:#fff;
                background-color: #1989FA;
                padding:0 0.15rem;
                border-radius: 0.1rem;
                font-size: 0.6rem;
                margin:0 0.3rem;
            }
        }
        .van-icon{
            color:gray;
            margin-right: 0.3rem;
        }
    }
    .order-box{
        width: 100%;
        border-bottom:1px solid lightgray;
        background-color: #fff;
        margin: 0.2rem 0;
        .order-bottom-p{
            padding:0.3rem 0.25rem;
            border-bottom:1px solid lightgray;
        }
        .order-box-container{
            width: 100%;
        }
    }
    .order-bottom{
        width: 100%;
        background-color: #fff;
        .order-bottom-p{
            width:93.4%;
            padding:0.3rem 0.25rem;
            border-bottom: 0.01rem solid lightgray;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .order-shop{
        width: 93.4%;
        padding:0.3rem 0.25rem;
        background-color: #fff;
        border-bottom:1px solid lightgray;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
}
</style>